<template>
    <div>
      <div class="edit">
        <div class="button">
        <el-button @click="handButton($event)" size="mini">修改</el-button>
      </div>
      </div>
      
      <div class="tab">
        <div class="row">
          <span class="name">商家名称</span><span class="info">{{ruleForm.name}}</span>
        </div>
        <div class="row">
          <span class="name">商家介绍</span><span class="info">{{ruleForm.describe}}</span>
        </div>
        <div class="row">
          <span class="name">商家地址</span><span class="info">{{ruleForm.address}}</span>
        </div>
        <div class="row">
          <span class="name">商家电话</span><span class="info">{{ruleForm.tel}}</span>
        </div>
        
      </div>

      <div class="merImg">
        <!-- <div class="imgBtn">
                <span class="img_btn"><i v-show="!addImgShow">+</i>
                  <input
                    ref="inputFile"
                    id=""
                    type="file"
                    name=""
                    @change="submitImg($event)"
                  >
                  <img
                    v-show="addImgShow"
                    ref="fil_img"
                    :src="imgPath"
                    alt=""
                    @click="submitImg($event)"
                  >
                </span>

              </div> -->
        <!-- <div><img src="../../../assets/test/shouji.jpg" alt="" /></div>
        <div><img src="../../../assets/test/shouji.jpg" alt="" /></div>
        <div><img src="../../../assets/test/shouji.jpg" alt="" /></div> -->
      </div>

          <!-- 弹窗 -->
    <div>
      <el-dialog
        title="修改"
        :visible.sync="dialogVisible0"
        width="27.683%"
        center="center"
        :before-close="handleClose"
      >
        <!-- 弹窗内容 -->
        <div class="content">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            
            label-width="80px"
            class="demo-ruleForm"
          >

            <!-- 名字 -->
            <el-form-item
              label="名字:"
              prop="name"
            >
              <el-input
                v-model="ruleForm.name"
                placeholder="输入名字"
              />
            </el-form-item>

            <!-- 描述 -->
            <el-form-item
              label="介绍:"
              prop="describe"
            >
              <el-input
                v-model="ruleForm.describe"
                placeholder="输入"
              />
            </el-form-item>

            <!-- 地址 -->
            <el-form-item
              label="地址:"
              prop="address"
            >
              <el-input
                v-model="ruleForm.address"
                placeholder="输入描述"
              />
            </el-form-item>
            <el-form-item
              label="电话:"
              prop="tel"
            >
              <el-input
                v-model="ruleForm.tel"
                placeholder="输入电话"
              />
            </el-form-item>
            
            <!-- <el-upload
           
            action="#"
            list-type="picture-card"
            :limit=3
            :auto-upload="false"
            :file-list="imgList"
            :on-change="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" >
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog> -->
          </el-form>
        </div>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <div class="footer_button">
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
            >提交</el-button>
          </div>
        </span>
      </el-dialog>
    </div>

    </div>
  </template>
  
  <script>
  import {getMerchant} from "@/api/dataReq"
  import { req } from '@/api/basicReq'
  export default {
    name: 'merInfo',
    // components: {},
    // props:{
    //     names:{
    //         type:Array,
    //         default:()=>{return []}
    //     }
    // },
        

    data() {
      return {
        dialogVisible0:false,
        ruleForm: {},
        dialogImageUrl: '',
        imgList: [],
        dialogVisible: false,
        addImgShow:false,
        imgPath: "",
        
      }
    },
    computed: {},
    created() {
      this.getMerchantInfo()
    },
    methods: {
      getMerchantInfo(){
        getMerchant().then(response => {
          if (response.code == '1') {
            // console.log(response)
            // console.log(response.data)
           this.ruleForm = response.data[0]

          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
      },

      submitImg(e){
      var headhost = e.target.files[0]
      var formData = new FormData()
      formData.append('headhost', headhost)
      var reqData = {
            url: 'user/UserInfo',
            method: 'put',
            data: formData
          }
      req(reqData).then(response => {
          if (response.code == '1') {
            this.$message.success('修改成功')
            this.getUserInfo()

          } else {
            this.$message.error('修改失败')
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
    },
     
      handButton(){
        this.dialogVisible0 = true
      },
      handleClose(){
        this.dialogVisible0 = false
      },

      handleRemove(file, fileList) {
        // console.log(file, fileList);
        this.imgList = fileList
      },
      // handlePictureCardPreview(file) {
      //   this.dialogImageUrl = file.url;
      //   this.dialogVisible = true;
      // },
      handlePictureCardPreview(file, fileList){
        // console.log(fileList)
        this.imgList = fileList
      },
      submitForm(){

        // console.log(this.ruleForm)
        // console.log(this.imgList)
        var reqData = {
        url: 'merchant/Merchant',
        method: 'put',
        data: this.ruleForm
      }
        req(reqData).then(response => {
          if (response.code == '1') {
            this.$message.success('修改成功')
            
            this.dialogVisible0 = false
           
            this.getMerchantInfo()
          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
        
      }
    }
  }
  </script>
  <style lang="scss" scoped>
    @import '~@/style/minxin.scss';
  .edit{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    .button {
      display: flex;
      justify-content: flex-start;
    }
  }
  .tab{
    width: 600px;
    // border: red 1px solid;
    margin: auto;
    margin-top: 50px;

  }
  .row{
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    .name{
      width: 200px;
      font-size: 18px;

    }
    .info{
      width: 200px;
      word-wrap:break-word; 
    word-break:break-all;
    }
  }
    
  .merImg{
    width: 600px;
    display: flex;
    margin: auto;
    justify-content: space-around;
    margin-top: 50px;
    div{
      img{
        width: 150px;
        height: 150px;
      }
    }
  }
  .addImg{

    width: 100px;
    height: 100px;
  }
  .imgShow{
    width: 100px;
    height: 100px;
  }
  .imgBtn {
    // width: 100%;
    position: relative;
    .img_btn {
      @include flex-center;
      border: 1px solid #dcdfe6;
      border-radius: 5px;
      color: #dcdfe6;
      font-size: 30px;
      width: 100px;
      height: 100px;
      overflow: hidden;
    }

    .img_btn > input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      z-index: 1000;
      opacity: 0;
      cursor: pointer;
    }

    .img_btn > img {
      width: 75px;
      height: 75px;
      object-fit: scale-down;
      position: absolute;
      top: center;
      left: center;
    }
  }
    
  </style>
  